<template>
	<div class="menu">
    <el-menu
      unique-opened
      default-active="1-1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">服务编排</span>
        </template>
        <el-menu-item-group>
          <router-link to="/main/task-manage/list" tag="span">
            <el-menu-item index="1-1" style="padding: 0 53px;">任务管理</el-menu-item>
          </router-link>
          <router-link to="/main/dispatching/list" tag="span">
            <el-menu-item index="1-2" style="padding: 0 53px;">调度监控</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>配置管理</span>
        </template>
        <router-link tag="span" to="/main/config/system">
          <el-menu-item index="/main/config/system" style="padding: 0 53px;">系统配置</el-menu-item>
        </router-link>
        <router-link tag="span" to="/main/config/interface">
          <el-menu-item index="/main/config/interface" style="padding: 0 53px;">超时配置</el-menu-item>
        </router-link>
        <router-link tag="span" to="/main/config/history">
          <el-menu-item index="/main/config/history" style="padding: 0 53px;">历史纪录配置</el-menu-item>
        </router-link>
      </el-submenu>
    </el-menu>

    <div class="left-btn" @click="isCollapse = !isCollapse" :class="{'active' : isCollapse}">
      <img :src="leftIcon" class="left-icon">
    </div>
  </div>
</template>
<script>
	export default{
	  name: "LeftMenu",
		data(){
			return {
        isCollapse: false,
        leftIcon: require("../../static/img/left.png"),
	 		}
		},
    watch: {
      isCollapse(val) {
        this.$emit("collapse", val);
      }
    },
		methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
	}
</script>
<style scoped lang="less">
	.menu{
    height: 100%;
    position: relative;
  }
  .el-menu{
    border: none;
  }
  .left-btn{
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: calc(-68px / 2);
    cursor: pointer;
    .left-icon{
      top: 0;
      position: absolute;
      height: 68px;
      width: 18px;
      z-index: 9;
    }
    &:before {
      content: '<';
      position: absolute;
      width: 18px;
      color: #fff;
      top: 50%;
      left: 0;
      line-height: 68px;
      text-align: center;
      z-index: 10;
    }
    &.active:before{
      content: '>';
    }
  }


</style>
